<template>
  <div class="orderDetail">
      <div class="head">
        <div>订单号：{{orderData.order.order_no}}</div>
        <div>下单日期：{{orderData.order.create_time}}</div>
        <div>订单状态：{{orderData.order.order_status_text}}</div>
      </div>
      <div class="body">
        <div class="title">订单商品</div>
        <div class="main">
        <x-table :full-bordered="true" :cell-bordered="true" style="background-color:#fff;">
          <thead>
            <tr>
              <th>商品规格</th>
              <th>数量</th>
              <th>价格</th>
              <th width="25%">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr :key="index" v-for="(item,index) in orderData.order_goods">
              <td>{{item.price}}/{{item.spec_name}}</td>
              <td>{{item.num}}</td>
              <td>￥{{item.price}}</td>
              <td><x-button mini>缺货</x-button></td>
            </tr>
          </tbody>
        </x-table>
        </div>
      </div>
      <flexbox v-if="orderData.order.order_status==0||orderData.order.order_status==40" :gutter="15" class="action">
        <flexbox-item span="170">
          <x-button @click.native="cancel(10)" type="warn">取消</x-button>
        </flexbox-item>
        <flexbox-item>
          <x-button v-if="orderData.order.order_status==0" @click.native="accept(40)" type="primary">接受</x-button>
          <x-button v-if="orderData.order.order_status==40" @click.native="shipment(60)" type="primary">出货</x-button>
        </flexbox-item>
      </flexbox>
  </div>
</template>
<script>
import { XTable, XButton, Flexbox, FlexboxItem } from "vux";
export default {
  name: "orderDetail",
  data() {
    return {
      orderData: { order: {}, order_goods: [] }
    };
  },
  methods: {
    change_status(order_status){
        this.$http.post('/api/supplier.orders/order_status_change',{
            oid:this.$route.params.oid,
            order_status,
        }).then(res=>{
            if(res.data.code){
              this.$router.go(-1)
            }
        })
    },
    cancel(order_status) {
        this.change_status(order_status)
    },
    accept(order_status) {
        this.change_status(order_status)
    },
    shipment(order_status){
        this.change_status(order_status)        
    }
  },
  components: {
    XTable,
    XButton,
    Flexbox,
    FlexboxItem
  },
  activated() {
    var that = this;
    this.$http
      .get("/api/supplier.orders/read", {
        params: {
          oid: this.$route.params.oid
        }
      })
      .then(function(res) {
        that.orderData = res.data.data;
      });
  }
};
</script>
<style scoped lang="less">
.orderDetail {
  padding: 0 15px;
  background-color: white;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  .main {
    thead {
      background-color: #f1f1f1;
    }
  }
  .head {
    line-height: 22px;
    margin-bottom: 20px;
    margin-top: 15px;
  }
  .title {
    margin-bottom: 10px;
    line-height: 25px;
  }
  .action {
    position: fixed;
    bottom: 15px;
    left: 15px;
    right: 15px;
    width: auto;
  }
}
</style>